<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<title>导航栏</title>
		<style>
			html,
			body {
				background-color: #fff;
			}
			
			.mui-bar {
				padding-left: 32px;
				padding-right: 36px;
				line-height: 44px;
				background-color: #fff;
			}
			
			header .search-btn,
			header .channel-btn {
				position: absolute;
				top: 0;
				z-index: 10;
				width: 44px;
				height: 44px;
				text-align: center;
				background-color: #fff;
				color: #999;
			}
			
			header .search-btn {
				left: 0;
			}
			
			header .channel-btn {
				right: 0;
			}
			
			header .swiper-slide {
				width: auto;
				padding: 0 14px;
				color: #000;
				font-size: 18px;
			}
			
			.swiper-wrapper .swiper-slide-active {
				color: #000;
			}
			
			.swiper-wrapper .nav-active {
				color: #159ceb;
			}
			
			header .iconfont {
				vertical-align: middle;
				font-size: 24px;
			}
		</style>
	</head>

	<body>
		<header id="nav" class="mui-bar mui-bar-nav">
			<div class="search-btn" id="searchBtn">
				<span class="mui-icon iconfont">&#xe600;</span>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper" id="sliderChannel">

				</div>
			</div>
			<div class="channel-btn" id="channelBtn">
				<span class="mui-icon iconfont">&#xe601;</span>
			</div>
		</header>
		<div class="mui-content"></div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../libs/zepto.min.js"></script>
	<script src="../../js/swiper.min.js"></script>
	<script src="../../js/template.js"></script>
	<script src="../../js/base64.js"></script>
	<script src="../../js/common.js"></script>
	<!-- 频道模板 -->
	<script id="channel" type="text/html">
		{{each lmlis as item}} {{if item.value == 0}} {{each item.data as value i}} {{if i == 0}}
		<a href="javascript:;" class="swiper-slide nav-active" data-type="{{value.id}}">{{value.name}}</a> {{else}}
		<a href="javascript:;" class="swiper-slide" data-type="{{value.id}}">{{value.name}}</a> {{/if}} {{/each}} {{/if}} {{/each}}
	</script>
	<script>
		var uuid = null;
		var defaultObj = {},
			productObj = {},
			streetObj = {};
		var spcTopic = null;
		mui.init({
			subpages: [{
				url: 'news_list.html',
				id: 'news_list.html',
				styles: {
					top: '45px',
					bottom: 0
				}
			}],
			swipeBack: false
		});
		//添加night自定义事件监听
		/*window.addEventListener('night', function(event) {
			lkg.nightMode();
		});*/
		mui.plusReady(function() {
			setTimeout(function() {
				var modeFlag = localStorage.getItem("modeFlag");
				if (modeFlag) {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");
					plus.navigator.setStatusBarBackground("#fefefe");
				}
			}, 0);
			//获取当前网络类型
			GetNetwork();

			function GetNetwork() {
				var types = {};
				types[plus.networkinfo.CONNECTION_UNKNOW] = "未知网络";
				types[plus.networkinfo.CONNECTION_NONE] = "已断开网络";
				types[plus.networkinfo.CONNECTION_ETHERNET] = "已连接网络";
				types[plus.networkinfo.CONNECTION_WIFI] = "已连接至Wifi网络";
				types[plus.networkinfo.CONNECTION_CELL2G] = "已连接至2G网络";
				types[plus.networkinfo.CONNECTION_CELL3G] = "已连接至3G网络";
				types[plus.networkinfo.CONNECTION_CELL4G] = "已连接至4G网络";
				if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
					mui.toast("未连接网络");
				}
				return types[plus.networkinfo.getCurrentType()];
			}
			//监听网络状态变化事件
			document.addEventListener("netchange", NetChange, false);

			function NetChange() {
				var network = plus.networkinfo.getCurrentType();
				switch (network) {
					case plus.networkinfo.CONNECTION_ETHERNET:
					case plus.networkinfo.CONNECTION_WIFI:
						mui.toast("已切换至Wifi网络");
						break;
					case plus.networkinfo.CONNECTION_CELL2G:
					case plus.networkinfo.CONNECTION_CELL3G:
					case plus.networkinfo.CONNECTION_CELL4G:
						mui.toast("已切换至4G网络");
						break;
					default:
						mui.toast("已断开网络");
						break;
				}
			}
			//预加载专题列表页
			setTimeout(function() {
				spcTopic = mui.preload({
					url: '../news/special-topic.html',
					id: 'special-topic.html',
					show: {
						aniShow: 'none'
					}
				});
			}, 200);
			uuid = plus.device.uuid; //获取设备的唯一标识
			initChannel(); //初始化频道
		});

		function initChannel() {
			mui.ajax({
				url: baseUrl + '/devs/createUc?devicesId=' + uuid,
				dataType: 'json',
				type: 'get',
				success: function(data) {
					if (data.returnFlag == 0) {
						var base64_data = base64encode(utf16to8(JSON.stringify(data)));
						var base64_local = (plus.storage.getItem("first") == null) ? null : base64encode(utf16to8(plus.storage.getItem("first")));
						var firstId = data.lmlis[0].data[0].id;
						plus.storage.setItem("firstId", firstId); //保存第一个频道的id
						//判断本地的数据是否和服务器相同
						if (base64_local != base64_data) {
							var newHtml = template('channel', data);
							document.getElementById('sliderChannel').innerHTML = newHtml;
							plus.storage.setItem("first", JSON.stringify(data)); //保存第一次的频道总数
							plus.storage.setItem("channels", JSON.stringify(data)); //保存更新后的频道总数
						} else {
							var oldHtml = template('channel', JSON.parse(plus.storage.getItem("channels")));
							document.getElementById('sliderChannel').innerHTML = oldHtml;
						}
						var mySwiper = new Swiper('.swiper-container', {
							freeMode: true,
							slidesPerView: 'auto',
							observer: true, //修改swiper自己或子元素时，自动初始化swiper
							observeParents: true //修改swiper的父元素时，自动初始化swiper
						});
						//你不加个这怎么回首位呢 垛子哥
						mySwiper.isBeginning = true;
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理
				}
			});
		}
		//添加update自定义事件监听
		window.addEventListener('update', function(event) {
			initChannel();
			//还要更新新闻列表啊 垛子哥!
			reloadNewsList();
		});

		function reloadNewsList() {
			if (!listPage) {
				listPage = plus.webview.getWebviewById('news_list.html');
			}
			listPage.reload();
		}
		var listPage = null;
		//导航栏点击事件
		mui('#nav').on('tap', 'a', function() {
			var id = $(this).attr('data-type');
			$(this).addClass("nav-active").siblings().removeClass("nav-active");
			//获得列表页面
			if (!listPage) {
				listPage = plus.webview.getWebviewById('news_list.html');
			}
			//触发列表页面的newsId事件
			mui.fire(listPage, 'listId', {
				id: id
			});
		});
		document.getElementById("searchBtn").addEventListener("tap", function() {
			mui.openWindow({
				url: "search.html",
				id: "search.html",
				show: {
					aniShow: 'pop-in' //页面显示动画，默认为”slide-in-right“；
				},
				waiting: {
					autoShow: false, //自动显示等待框，默认为true
				}
			});
		});
		document.getElementById("channelBtn").addEventListener("tap", function() {
			mui.openWindow({
				url: "channels.html",
				id: "channels.html",
				show: {
					aniShow: 'pop-in' //页面显示动画，默认为”slide-in-right“；
				},
				waiting: {
					autoShow: false, //自动显示等待框，默认为true
				}
			});
		});
	</script>

</html>